<template>
    <div>
        <nut-navbar class="header" title="发现" @on-click-back="router.push({name:home})" icon="share" @on-click-send="send"></nut-navbar>
        <main>
            <ul class="guan flex">
                <li><img src="https://img61.ddimg.cn/2018/8/25/20180825153505715.png" alt=""></li>
                <li><img src="https://img61.ddimg.cn/2018/8/25/2018082515383576435.png" alt=""></li>
                <li><img src="https://img61.ddimg.cn/2018/8/25/2018082515395286917.png" alt=""></li>
                <li><img src="https://img63.ddimg.cn/2018/8/31/2018083116044590576.png" alt=""></li>
                <li><img src="http://img63.ddimg.cn/upload_img/00660/h5/ddpp-1537350824.png" alt=""></li>
                <li><img src="https://img62.ddimg.cn/2018/8/31/2018083116363087335.png" alt=""></li>
                <li><img src="https://img62.ddimg.cn/2018/8/31/2018083116355544875.png" alt=""></li>
                <li><img src="https://img61.ddimg.cn/2018/8/31/2018083116365438226.png" alt=""></li>
                <li><img src="https://img62.ddimg.cn/2018/8/31/2018083116373380162.png" alt=""></li>
                <li><img src="http://img60.ddimg.cn/upload_img/00782/h5/coupon-1537505152.png" alt=""></li>
            </ul>
            <div class="feed">
                <h2>促销专场</h2>
                <ul class="my1 flex">
                    <li>
                        <p>每满100减50</p>
                        <img src="https://img3m8.ddimg.cn/56/19/26315048-1_b_42.jpg" alt="">
                    </li>
                    <li>
                        <p>5件&88元10件</p>
                        <img src="https://img3m8.ddimg.cn/34/15/26510848-1_b_6.jpg" alt="">
                    </li>
                    <li>
                        <p>每满100减30</p>
                        <img src="https://img3m0.ddimg.cn/53/11/29134070-1_b_7.jpg" alt="">
                    </li>
                    <li>
                        <p>49元5本</p>
                        <img src="https://img3m3.ddimg.cn/45/16/1901260593-1_b_1.jpg" alt="">
                    </li>
                    <li>
                        <p>每满79减30</p>
                        <img src="https://img3m8.ddimg.cn/56/19/26315048-1_b_42.jpg" alt="">
                    </li>
                    <li>
                        <p>图书1件75折</p>
                        <img src="https://img3m0.ddimg.cn/53/11/29134070-1_b_7.jpg" alt="">
                    </li>
                </ul>
            </div>
            <div class="mt1">
                <nut-card
                style="border-bottom:10px solid #f5f5f5"
                v-for="(item,index) in goods"
                :key="index"
                :img-url="item.url"
                :title="item.title"
                :price="item.price"
                :vipPrice="item.vipPrice"
                :shopDesc="item.shopDesc"
                :delivery="item.delivery"
                :shopName="item.shopName"
                >
                </nut-card>
            </div>
        </main>
    </div>
</template>

<script>
import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'
export default {
    name: '',
        setup() {
            const data = reactive({
                goods:[
                    {
                        url:'https://img3x8.ddimg.cn/6/18/29146398-1_h.jpg',
                        title:'德国少年儿童百科知识全书：什么是什么珍藏版 全辑（全60册，另附赠阅读指导手册一本，引进德国知名科普品牌“WAS IST WAS”，畅销全球60年，丹妈读童书推荐）',
                        price:'1050',
                        shopDesc:'课外读本',
                        delivery:'深圳',
                        shopName:'趣乐课外读本'
                    },
                    {
                        url:'https://img3x8.ddimg.cn/6/18/29146398-1_h.jpg',
                        title:'德国少年儿童百科知识全书：什么是什么珍藏版 全辑（全60册，另附赠阅读指导手册一本，引进德国知名科普品牌“WAS IST WAS”，畅销全球60年，丹妈读童书推荐）',
                        price:'1050',
                        shopDesc:'课外读本',
                        delivery:'深圳',
                        shopName:'趣乐课外读本'
                    },
                    {
                        url:'https://img3x8.ddimg.cn/6/18/29146398-1_h.jpg',
                        title:'德国少年儿童百科知识全书：什么是什么珍藏版 全辑（全60册，另附赠阅读指导手册一本，引进德国知名科普品牌“WAS IST WAS”，畅销全球60年，丹妈读童书推荐）',
                        price:'1050',
                        shopDesc:'课外读本',
                        delivery:'深圳',
                        shopName:'趣乐课外读本'
                    }
                ]
            })
            const refData = toRefs(data);
            return {
                ...refData,
            }
        }
};
</script>
<style scoped lang="scss">
.header{
    height: 50px;position: fixed;box-sizing: border-box;top: 0;width: 100%;z-index:999;background-color: #fff;
}
main{
    margin: 50px 0 70px 0;
    .guan{
        flex-wrap: wrap;
        li{
            width: 20%;
            img{width: 100%;height: auto;}
        }
    }
    .feed{
        background: #fff;overflow: hidden;
        background-image: url(https://z.dangdang.com/static/img/%E4%B9%9D%E5%AE%AB%E6%A0%BC.5e5e35d.png);
        margin-bottom: -.3rem;
        background-size: cover;
        padding: 0 .26rem .26rem;
        h2{text-align: center;font-size: 20px;color: #fff;}
        ul{
            flex-wrap: wrap;
            li{
                margin-bottom: 10px;width: 31%;background-color:#fff;border-radius: 10px;color:#943dff;font-size:12px;
                img{width: 80%;}
            }
        }
    }
} 
</style>